<template>
  <div class="content">
    <div id="printWrap" class="print_wrap" style="font-size: 12px">
      <div style="margin-top: 10px; display: flex">
        <div
          v-for="i in 30"
          :key="i"
          style="border-bottom: 1px solid; flex: 1; margin: 0 2px 10px"
        />
      </div>
      <div style="display: flex; margin-bottom: 4px">
        {{ $t("message.cgmc") }}：{{ obj.venueName }}
      </div>
      <div style="display: flex; margin-bottom: 4px">
        {{ $t("message.syry") }}：{{ obj.userName }}
      </div>
      <div style="display: flex; margin-bottom: 4px">
        {{ $t("message.printTime") }}：{{ obj.printTime }}
      </div>
      <div style="margin-top: 10px; display: flex">
        <div
          v-for="i in 30"
          :key="i"
          style="border-bottom: 1px solid; flex: 1; margin: 0 2px 10px"
        />
      </div>
      <div style="display: flex; margin-bottom: -10px">
        {{ $t("message.productName") }}：{{ obj.productName }}
      </div>
      <br>
      <div style="display: flex; margin-bottom: -10px">
        {{ $t("message.price") }}：{{ obj.money }}
      </div>
      <br>
      <div v-if="obj.peopleNum" style="display: flex; margin-bottom: -10px">
        {{ $t("message.bmrs") }}：{{ obj.peopleNum }}
      </div>
      <br v-if="obj.peopleNum">
      <div v-if="obj.applyTime" style="display: flex; margin-bottom: -10px">
        {{ $t("message.bmsj") }}：{{ obj.applyTime }}
      </div>
      <br v-if="obj.applyTime">
      <div
        v-if="obj.validityPeriod"
        style="display: flex; margin-bottom: -10px"
      >
        {{ $t("message.yxq") }}：{{ obj.validityPeriod }}
      </div>
      <br v-if="obj.validityPeriod">
      <div v-if="obj.memberCardNum" style="display: flex; margin-bottom: -10px">
        {{ $t("message.hyk") }}：{{ obj.memberCardNum }}
      </div>
      <br v-if="obj.memberCardNum">
      <div v-if="obj.mealsValue" style="display: flex; margin-bottom: -10px">
        {{ $t("message.sycs2") }}：{{ obj.mealsValue }}
      </div>
      <br v-if="obj.mealsValue">
      <div style="margin-top: 10px; display: flex">
        <div
          v-for="i in 30"
          :key="i"
          style="border-bottom: 1px solid; flex: 1; margin: 0 2px 10px"
        />
      </div>
      <div style="text-align: center; margin: 30px 0 20px">
        <vue-qr :text="obj.erCode" :margin="0" :logo-scale="0.3" :size="120" />
      </div>
      <div v-if="!obj.isHddd" style="margin-top: 10px; height: auto; text-align: center">
        {{ $t("message.jrxksm") }}
      </div>
      <div style="width: 100%; margin-top: 24px; text-align: center">·</div>
    </div>
  </div>
</template>

<script>
import print from 'print-js'
import vueQr from 'vue-qr'
export default {
  // 场地、门票、约球
  components: {
    vueQr
  },
  data() {
    return {
      obj: {
        erCode: ''
      }
    }
  },
  methods: {
    print() {
      const { obj } = this
      console.log('obj', obj)
      print({
        printable: 'printWrap',
        type: 'html',
        header: this.$t('message.hyjr') + `${obj.venueName}`,
        headerStyle:
          'font-weight: 500;font-size: 24px;line-height: 26px;margin-bottom: 30px;text-align: center;',
        maxWidth: 300,
        font_size: '10pt',
        targetStyles: ['*']
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  position: fixed;
  left: -1000px;
  bottom: -1000px;
}
</style>
